import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'

/**
 * 判断当前设备是否为移动设备
 * @returns {boolean} 如果是移动设备返回 true，否则返回 false
 */
export function isMobile(): boolean {
  const userAgent = navigator.userAgent.toLowerCase()
  const mobileKeywords = [
    'android',
    'iphone',
    'ipod',
    'ipad',
    'windows phone',
    'mobile',
    'phone',
    'tablet'
  ]

  return mobileKeywords.some(keyword => userAgent.includes(keyword))
}

/**
 * 判断当前设备是否为 iOS 设备
 * @returns {boolean} 如果是 iOS 设备返回 true，否则返回 false
 */
export function isIOS(): boolean {
  const userAgent = navigator.userAgent.toLowerCase()
  return /iphone|ipad|ipod/.test(userAgent)
}

/**
 * 判断当前设备是否为 Android 设备
 * @returns {boolean} 如果是 Android 设备返回 true，否则返回 false
 */
export function isAndroid(): boolean {
  const userAgent = navigator.userAgent.toLowerCase()
  return userAgent.includes('android')
}

// 使用 useWindowSize 获取响应式窗口尺寸
const { width: windowWidth } = useWindowSize()

// 响应式判断是否为移动设备模式（窗口宽度 < 768px）
export const isMobileMode = computed(() => windowWidth.value < 768)

// 导出窗口宽度，方便直接使用
export { windowWidth }
